<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="HandheldFriendly" content="true" />
    <meta name="MobileOptimized" content="320" />
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/jiazai.css">
    <title>忘记密码</title>
    <style type="text/css">
    	html{
    		height: 100vh;
    	}
    	body{
    		width: 100%;
    		height: 100%;
    		overflow: hidden;
    		background: url(img/login-bg.png) no-repeat center center fixed;
    		background-size: 100% 100%;
    	}
    	#com-tit{
    		position: fixed;
    		top: 10px;
    		right: 0;
    		left: 0;
    		padding: 30px 20px 0;
    		font-size: 20px;
    		color: white;
    	}
    	.content{
    		position: fixed;
    		top: 70px;
    		right: 0;
    		left: 0;
    		bottom: 0;
    		overflow: auto;
    	}
    	#com-tit>.cont{
    		width: 60px;
    		height: 30px;
    	}
    	.logo{
    		margin-top: 8vh;
    	}
    	.logo>img{
    		width: 110px;
    		height: auto;
    	}
    	.input-wrap{
    		margin-top:6vh ;
    		padding: 0 40px;
    	}
    	.input{
    		margin-top: 3vh;
    		background: #06476D;
    		border: 1px solid #1E5673;
    		border-radius: 6px;
    	}
    	.input>img{
    		margin-left: 15px;
    		margin-right: 15px;
    		width: 30px;
    		height: 30px;
    	}
    	.input>div{
    		padding:8px 18px;
    		border-left: 1px solid #1E5673;
    		background: ;
    	}
    	
    	.input>div>input{
    		width: 100%;
    		height: 20px;
    		line-height: 20px;
    		padding: 10px 0 ;
    		font-size: 16px;
    		color: white;
    		background: transparent;
    	}
    	.input>div>input::-webkit-input-placeholder{
    		font-size: 16px;
    		color: rgba(231, 231, 230, .5);
    	}
    	.send-code>img{
    		flex: 0 0 30px;
    	}
    	.send-code>.input-info{
    		flex: 1 1 0;
    		overflow: hidden;
    	}
    	.send-code>span{
    		flex: 0 0 50px;
    		text-align: center;
    		font-size: 15px;
    		color: white;
    	}
    	.send-code>.input-info>input{
    		width: 100%;
    	}
    	.ser{
    		padding-top: 2vh;
    		font-size: 15px;
    		color: rgba(231, 231, 230, .5);
    	}
    	.ser>input{
    		margin-right: 5px;
    	}
    	.ser>span:last-of-type{
    		color: white;
    	}
    	.btn-wrap{
    		padding:0 40px 40px;
    	}
    	.btn-wrap>p{
    		width: 100%;
			padding: 16px 0;
    		border-radius: 6px;
    		background: #6691B3;
			font-size: 18px;
			text-align: center;
    		color: white;
    	}
    	.bottom-notice{
    		margin-top: 10px;
    		padding: 0 20px;
    	}
    	.line-dashed{
    		height: 1px;
    		border-bottom: 1px dashed rgba(181, 209, 226, .6);
    	}
    	.bottom-notice>h5{
    		padding-top: 18px;
    		font-size: 18px;
    		color: #B5D1E2;
    	}
    	.notice-font{
    		padding-top: 15px;
    		font-size: 15px;
    		line-height: 25px;
    		color: #B5D1E2;
    	}
    	.like-study{
    		width: 80px;
    		margin: 25px auto;
    		padding-bottom: 8px;
    		font-size: 18px;
    		text-align: center;
    		color: white;
    		border-bottom: 1px solid rgba(181, 209, 226, .6);
    	}
    </style>
</head>

<body>
    <div id='app'>

         <!-- 加载中动画 -->
        <div id='jiazai-ani' v-if='jiazai'>
            <div class="arc"></div>
            <h1><span>LOADING</span></h1>
        </div>
        <!-- 加载中动画 -->
        
        <div id="com-tit" class='dis-spa'>
        	<p class='cont dis-start' @tap="_close();"><img src="img/back-white.svg"/ style="width: 20px;height: 20px;"></p>
        	<p>导入API</p>
        	<p class='cont' style="opacity: 0;"><img src="img/back-white.svg"/ style="width: 20px;height: 20px;"></p>
        </div>
        
        <div class="content">
        	<div class="logo dis-cen">
				<img src="img/ai-log.png"/>
			</div>
			
			<div class="input-wrap">
				<div class="input dis-start">
					<img src="img/user-icon.svg"/>
					<div class='input-info'>
						<input type="text" placeholder="输入您的apikey" v-model='api'/>
					</div>
				</div>
				
				<div class="input dis-start">
					<img src="img/pas-icon.svg"/>
					<div class='input-info'>
						<input type="text" placeholder="输入您的secretkey" v-model='token'/>
					</div>
				</div>
				
			</div>
			
			<div class="btn-wrap">
				<p style="margin-top: 30px;" @tap="sub">导入</p>
			</div>
			<div class="bottom-notice">
				<p class='line-dashed'></p>
				<h5>温馨提示</h5>
				<p class='notice-font'>
					你需要开启读取和交易权限，你的API key和secret key会被存在本地而不上传至任何第三方服务器，所以可以保证他们安全而不被窃取。
				</p>
				<!--<p class='like-study'>查看教程</p>-->
			</div>
        </div>
    </div>
    <script src="js/comm.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/vue.min.js"></script>
    <script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8">
        var app = new Vue({
            el: '#app',
            data: {
                //加载动画
                jiazai: false,
                api:'',
                token:''
            },
            created: function() {
				
            },
            mounted:function(){
            	
            },
            methods: {
            	//导入Api
            	sub:function(){
            		if(this.api.length<11){
            			_toast('您输入的apikey格式不对');
            			return;
            		}
            		if(this.token.length<32){
            			_toast('您输入的secretkey格式不对');
            			return;
            		}
            		var This=this;
            		This.jiazai=true;
            		HTTP.post(BINDTOKEN,{
            			api:this.api,
            			token:this.token
            		},function(data){
            			This.jiazai=false;
            			_toast(data.msg);
            			if(String(data.status)=='1'){
            				plus.webview.currentWebview().opener().evalJS("update()");
            				setTimeout(function(){
            					_close();	  
            				},1200);
            			}
					});
            	}
            }
        });
       
    </script>
</body>

</html>